/**
 * SCSS变量定义
 */

// 颜色系统 - 使用CSS变量
$color-primary: var(--color-primary);
$color-primary-light: var(--color-primary-light);
$color-primary-lighter: var(--color-primary-lighter);
$color-primary-dark: var(--color-primary-dark);

$color-success: var(--color-success);
$color-success-light: var(--color-success-light);
$color-success-dark: var(--color-success-dark);

$color-warning: var(--color-warning);
$color-warning-light: var(--color-warning-light);
$color-warning-dark: var(--color-warning-dark);

$color-danger: var(--color-danger);
$color-danger-light: var(--color-danger-light);
$color-danger-dark: var(--color-danger-dark);

$color-info: var(--color-info);
$color-info-light: var(--color-info-light);
$color-info-dark: var(--color-info-dark);

// 文本颜色
$text-color-primary: var(--text-color-primary);
$text-color-regular: var(--text-color-regular);
$text-color-secondary: var(--text-color-secondary);
$text-color-placeholder: var(--text-color-placeholder);

// 背景颜色
$bg-color: var(--bg-color);
$bg-color-page: var(--bg-color-page);
$bg-color-light: var(--bg-color-light);
$bg-color-lighter: var(--bg-color-lighter);
$bg-color-dark: var(--fill-color-dark);

// 边框颜色
$border-color-base: var(--border-color);
$border-color-light: var(--border-color-light);
$border-color-lighter: var(--border-color-lighter);
$border-color-extra-light: var(--border-color-extra-light);
$border-color-dark: var(--border-color-dark);
$border-color-darker: var(--border-color-darker);

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
$font-size-extra-large: 20px;
$font-size-large: 18px;
$font-size-medium: 16px;
$font-size-base: 14px;
$font-size-small: 13px;
$font-size-extra-small: 12px;

// 行高
$line-height-base: 1.5;
$line-height-small: 1.2;
$line-height-large: 1.8;

// 圆角
$border-radius-base: 6px;
$border-radius-small: 4px;
$border-radius-large: 8px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: var(--box-shadow);
$box-shadow-light: var(--box-shadow-light);
$box-shadow-dark: var(--box-shadow-dark);

// 间距
$spacing-base: 16px;
$spacing-small: 8px;
$spacing-large: 24px;
$spacing-extra-large: 32px;

// 布局
$header-height: 60px;
$sidebar-width: 240px;
$sidebar-collapsed-width: 64px;
$footer-height: 60px;

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1920px;

// Z-index
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 过渡动画
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-fade: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1);
$transition-collapse: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;

// 主题色彩映射
$theme-colors: (
  'primary': $color-primary,
  'success': $color-success,
  'warning': $color-warning,
  'danger': $color-danger,
  'info': $color-info
);

// 文本色彩映射
$text-colors: (
  'primary': $text-color-primary,
  'regular': $text-color-regular,
  'secondary': $text-color-secondary,
  'placeholder': $text-color-placeholder
);

// 背景色彩映射
$bg-colors: (
  'base': $bg-color,
  'light': $bg-color-light,
  'lighter': $bg-color-lighter,
  'dark': $bg-color-dark
);

// 边框色彩映射
$border-colors: (
  'base': $border-color-base,
  'light': $border-color-light,
  'lighter': $border-color-lighter,
  'extra-light': $border-color-extra-light,
  'dark': $border-color-dark,
  'darker': $border-color-darker
);
